<template>
  <div class="header">
    <el-form ref="form" :model="form">
      <div class="search">
        <el-form-item label="审核状态" class="label">
          <el-select placeholder="请选择审核状态" class="input" />
        </el-form-item>
        <el-form-item label="单元" class="label">
          <el-input v-model="form.lot" class="input" placeholder="请输入单元号" />
        </el-form-item>
        <el-form-item label="门牌" class="label">
          <el-input v-model="form.room" class="input" placeholder="请输入门牌号" />
        </el-form-item>
        <el-form-item label="租客姓名" class="label">
          <el-input v-model="form.room" class="input" placeholder="请输入租客姓名" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
        </el-form-item>

        <el-form-item style="width:100%;">
          <div style="float:right;">
            <img src="../../assets/T通用按钮/按钮/导出.png" alt />
          </div>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'#ebecf0',color:'#3b3c3c'}"
     >
      <el-table-column width="100" type="index" label="序号" />
      <el-table-column prop="community" label="小区名称" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="door" label="单元-门牌" />
      <el-table-column prop="door" label="房间" />
      <el-table-column prop="time" label="提交时间" />
      <el-table-column prop="type" label="发起类型" />
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          <el-link type="warning" v-if="scope.row.status===0">待审核</el-link>
          <el-link type="success" v-else-if="scope.row.status===1">已通过</el-link>
          <el-link type="danger" v-else-if="scope.row.status===2">未通过</el-link>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)">{{ scope.row.status==0?'审核':'查看' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog title width="55%" :visible.sync="dialogVisible" class="checkout">
      <div class="dialog_box">
        <div class="dialog_content">
          <div class="dialog_title">审核信息</div>
          <el-form ref="form" :inline="true" :model="detail">
            <el-row :gutter="20">
              <el-col :span="9">
                <el-form-item label="访问小区" class="label">
                  <el-input v-model="detail.community" class="input" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="单元-门牌" class="label">
                  <el-input v-model="detail.door" class="input" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="9">
                <el-form-item label="租客姓名" class="label">
                  <el-input v-model="detail.applyer" class="input" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="申报人姓名" class="label">
                  <el-input v-model="detail.reviewer" class="input" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="9">
                <el-form-item label="申报时间" class="label">
                  <el-input v-model="detail.time" class="input" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="申报人类型" class="label">
                  <el-input v-model="detail.type" class="input" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="9">
                <el-form-item label="申报人手机号" class="label">
                  <el-input v-model="detail.phone" class="input" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog_content examineinfo">
          <div class="dialog_title">审核备注</div>
          <el-form>
            <!-- 待审核 -->
            <el-form-item label="审核备注" v-if="detail.status==0">
              <el-input type="textarea" placeholder="输入审核备注" v-model="content" />
            </el-form-item>
            <!-- 审核完成 -->
            <el-row :gutter="20" v-if="detail.status!=0">
              <el-col :span="9">
                <div class="label" style="font-weight:600;margin-bottom:10px;margin-top: 5px;">审核状态</div>
                <div
                  style="border-radius: 4px;border: 1px solid #dcdfe6;display:flex;justify-content: space-between;align-items: center;height:40px;padding-left:10px"
                >
                  <el-link type="success" v-if="detail.status==1">已通过</el-link>
                  <el-link type="danger" v-if="detail.status==2">未通过</el-link>
                </div>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="审核备注" class="label">
                  <el-input v-model="detail.content" class="input" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" v-if="detail.status==0">
        <el-button @click="dialogVisible = false">不通过</el-button>
        <el-button type="primary" @click="dialogVisible = false">通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Visitor",
  components: {},
  data() {
    return {
      form: {},
      tableData: [
        {
          lot: "10-102",
          phone: "13982736178",
          door: "3",
          community: "新丰苑三期",
          type: "房东发起",
          time: "2019-10-23 13:33:33",
          status: 0
        },
        {
          lot: "10-102",
          phone: "13982736178",
          door: "3",
          community: "新丰苑三期",
          type: "房东发起",
          time: "2019-10-23 13:33:33",
          status: 1
        },
        {
          lot: "10-102",
          phone: "13982736178",
          door: "3",
          community: "新丰苑三期",
          type: "房东发起",
          time: "2019-10-23 13:33:33",
          status: 2
        }
      ],
      total: 100,
      page: 10,
      dialogVisible: false,
      content: "",
      // 申报信息
      detail: {
        name: "张扬阳",
        type: "二房东",
        community: "新丰苑三期",
        door: "1-301",
        phone: "13982736178",
        time: "2020-10-23 12:23:12",
        applyer: "王浩",
        reviewer: "周华东",
        content: "租客未搬离"
      }
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    handleClick: function(row) {
      this.dialogVisible = true;
      this.detail.status = row.status;
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  background: #ffffff;
  padding: 25px;
  padding-bottom: 100px;
  min-height: 800px;
  position: relative;
  .search {
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid #dcdee3;
    margin-bottom: 30px;
    img {
      vertical-align: middle;
    }
  }
  .input {
    width: 330px;
  }
  .label {
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
  }
  .pagination {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 50px;
  }
  .examineinfo {
    margin-top: 20px;
  }
  .dialog_content {
    /* .dialog_title {
     font-size: 24px;
     font-weight: 800;
   } */
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
    margin-top: 8px;
  }
}
</style>
<style scoped>
.checkout /deep/.el-dialog__header {
  padding:5px!important;
}
.checkout /deep/.el-dialog__body {
  padding: 20px 15px!important;
}
</style>
